<template>
	<view>
		<nav-header title="发布群公告" :show-right="false">
		</nav-header>

		<view class="content">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" validate-trigger="bind">
				<view class="today">
					<view>
						<text class="title">今日可发布数
							&nbsp;&nbsp;({{ group.releasedNotice }}/{{ group.maxReleaseNotice }})</text>
					</view>
					<view>
						<button class="btncolor" type="primary" size="mini" @tap.stop.native="">
							<text class="text-xs-Medium">增加次数</text>
						</button>
					</view>
				</view>
				<view class="content-textarea">
					<uni-forms-item name="content">
						<view class="textLength">
							<text class="text-sm-Medium">发布公告内容</text>
							<text class="text-sm-Regular">{{ textLength }}/300</text>
						</view>

						<uni-easyinput type="textarea" maxlength="300" @input="getLength" autoHeight
							v-model="formData.content" placeholder="请输入内容" :inputBorder="false" />
					</uni-forms-item>
				</view>

				<view class="switch">
					<up-cell-group>
						<up-cell title="设为置顶">
							<template #right-icon>
								<up-switch v-model="isOnTop" activeColor="#17B26A" @change="change"></up-switch>
							</template>
						</up-cell>
						<up-cell title="固定在聊天框">
							<template #right-icon>
								<up-switch v-model="isFixedBox" activeColor="#17B26A" @change="change1"></up-switch>
							</template>
						</up-cell>
						<up-cell title="使用弹窗展示公告">
							<template #right-icon>
								<up-switch v-model="isPopNotice" activeColor="#17B26A" @change="change2"></up-switch>
							</template>
						</up-cell>
					</up-cell-group>
				</view>

			</uni-forms>

			<view class="btn-group">
				<!-- #ifndef MP-WEIXIN -->
				<up-button class="btn" plain @click="commit" color="#2970FF">
					<text class="text-md-Medium">发布</text>
				</up-button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" plain @click="commit"
					style="color: #2970FF;border-color: #2970FF;line-height: 38px;height: 38px;font-size: 32rpx;">发布</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					content: ""
				},
				rules: {
					content: {
						rules: [{
							required: true,
							errorMessage: '请填写内容',
						}]
					}
				},
				gonggao: "",
				textLength: 0,
				isOnTop: false,
				isFixedBox: false,
				isPopNotice: false,
				groupId: 0,
				group: []
			}
		},
		methods: {
			getLength(e) {
				this.textLength = e.length
			},
			change(e) {
				this.isOnTop = e
			},
			change1(e) {
				this.isFixedBox = e
			},
			change2(e) {
				this.isPopNotice = e
			},
			loadGroupInfo(id) {
				this.$http({
					url: `/group/find/${id}`,
					method: 'GET'
				}).then((group) => {
					console.log(group)
					this.group = group;
					if (this.group.maxReleaseNotice == null) {
						this.group.maxReleaseNotice = 2
					}

				});
			},
			commit() {
				this.$refs.form.validate().then(res => {
					let data = {
						groupId: this.groupId,
						content: this.formData.content,
						isOnTop: this.isOnTop,
						isFixedBox: this.isFixedBox,
						isPopNotice: this.isPopNotice
					}
					this.$http({
						url: "/group/createGroupNotice",
						method: "POST",
						data: data
					}).then((res) => {
						uni.showToast({
							title: `发布成功`,
							icon: 'success'
						})
						setTimeout(() => {
							// 回退并刷新
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.loadGroupInfo();
							uni.navigateBack();
						}, 1000);
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		},
		onLoad(options) {
			this.groupId = options.id;
			this.loadGroupInfo(options.id)
		},
		onUnload() {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			prevPage.$vm.handleData();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.content-textarea {
			margin-top: 16rpx;
			padding: 24rpx;
			gap: 24rpx;

			.textLength {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				text:first-child {
					color: $gray-900;
				}

				text:last-child {
					color: $gray-400;
				}
			}

			:deep(.uni-textarea-wrapper) {
				background-color: $gray-100;
			}

			:deep(.uni-easyinput__content.is-textarea) {
				// height: 40rpx;
				padding: 24rpx 32rpx;
				background-color: $gray-100 !important;
			}


		}

		.switch {
			// margin-top: 40rpx;
		}

		.today {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 32rpx;

			.title {
				color: $brand-500;
				font-size: 30rpx;
			}

			.btncolor {
				background-color: $brand-500;
				color: $white;
				padding: 8rpx 24rpx;
				border-radius: 34rpx;
				text-align: center;
				line-height: 36rpx;
				vertical-align: middle;
			}
		}

		.btn-group {
			height: 375rpx;
			padding: 24rpx 32rpx;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-end;
			gap: 20rpx;

			.btn {
				border-radius: 40rpx;
				width: 100%;

				text {
					color: $brand-500;
				}
			}
		}
	}
</style>